<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flex Sub Element Demo</title>
    <style>
       .parent{
            width: 80vw;
            height: 300px;
            background-color: aqua;
            display: flex;
            gap: 20px;
        }
       .child{
            /* 子元素最然是固定宽度，但是会随着页面宽度的收缩而收缩 */
            /* 这是因为 Flex 布局的子元素默认的 flex-shrink 为 1 */
            /* 如果设置 flex-grow 为 1，父元素的剩余空间会被两个子元素撑满 */
            /* 并且会随着页面宽度的拉伸而收拉伸 */
            /* flex-grow: 1; */
            width: 300px;
            height: 100px;
            background-color: burlywood;
       }

    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
        <div class="child">

        </div>
    </div>
</body>
</html>